<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" title="工伤事故申报案件信息"
		:isBack="true" backText="返回"></cu-custom>
		<view>
			<view class="head">
				案件信息
			</view>
			<zh-text labelAlign="left" label="当前位置" labelWidth="150rpx" :value="caseInfo.curLocation" 
			 inputAlign="right" :rightIconClass="locationError?'cuIcon-refresh text-red':'cuIcon-locationfill text-blue'" 
			 @right-icon-click="gotoSearch"></zh-text>
			 <zh-input v-model="caseInfo.accidentPlace" type="text" label="事故发生地"
			 labelAlign="left" inputAlign="right" :required="true"></zh-input>
			<zh-picker
				pickerRef="accidentDate"
				mode="date"
				startYear="2000" 
				label="事故发生时间"
				themeColor="#FC7983"
				labelAlign="left"
				rightIconClass="text-gray"
				justifyContent="space-between"
				:value="caseInfo.accidentDate"
				fields="day"
				ref="accidentDate"
				:required="true"
				@pickerChange="onAccidentDateChange($event)"
			></zh-picker>
			<zh-picker
				pickerRef="diagnosisTime"
				mode="date"
				startYear="2000" 
				label="诊断时间(选填)"
				themeColor="#FC7983"
				labelAlign="left"
				rightIconClass="text-gray"
				justifyContent="space-between"
				:value="caseInfo.diagnosisTime"
				fields="day"
				ref="diagnosisTime"
				@pickerChange="onDiagnosisTimeChange($event)"
			></zh-picker>
			<zh-input v-model="caseInfo.diagnosticHospital" type="text" label="诊断医院(选填)"
			labelAlign="left" inputAlign="right" ></zh-input>
			<view class="shead">受伤部位</view>
			<zh-input v-model="caseInfo.diagnosticHospital" type="text"
			labelAlign="left" inputAlign="left" placeholder="你需要对受伤部位，进行简要描述"></zh-input>
			<view class="shead">事件描述</view>
			<zh-input v-model="caseInfo.diagnosticHospital" type="text"
			labelAlign="left" inputAlign="left" placeholder="你需要对受伤部位，进行简要描述"></zh-input>
			<view class="flex flex-direction" style="padding-top: 10rpx;">
				<button class="cu-btn shadow margin-tb-sm lg bg-gradual-blue-light" @tap="submit">
					提<text style="width: 50rpx;"></text>交
				</button>
			</view>
		</view>
		<u-modal v-model="modelShow"  :content="modelContent" :confirm-color="userType=='20'?'#0081ff':'#f37b1d'"
		@confirm="modelConfirm"></u-modal>
	</view>
</template>

<script>
	// #ifdef MP-WEIXIN
	import amap from '@/common/amap-wx.js';
	// #endif
	import systemConfig from '@/common/config/systemConfig.js'
	export default {
		data() {
			return {
				modelShow:false,
				modelContent:'',
				amapPlugin:null,
				locationError:false,
				caseInfo:{
					curLocation:'定位中...',
					accidentPlace:'',
					accidentDate:'',
				},
				caseInfoRequired:['curLocation','accidentPlace','accidentDate']
			}
		},
		onLoad: function (option) {
			// #ifdef MP-WEIXIN
			this.amapPlugin = new amap.AMapWX({
				key: systemConfig.amapKey
			});
			// #endif
		},
		onReady() {
			// #ifdef MP-WEIXIN
			this.isGetLocation();
			// #endif
		},
		methods: {
			modelConfirm(){
				this.$Router.back(2)
			},
			submit(){
				let caseInfo = this.caseInfo;
				let caseInfoReq = this.caseInfoRequired;
				for(var i=0;i<caseInfoReq.length;i++){
					if(caseInfo[caseInfoReq[i]]==''){
						this.modelContent='请填写页面上必填内容（*）'
						this.modelShow = true
						return;
					}
				}
				this.modelContent='保存成功'
				this.modelShow = true
			},
			gotoSearch(){
				if(this.locationError){
					// #ifdef MP-WEIXIN
					this.isGetLocation()
					// #endif
				}
			},
			onAccidentDateChange(e){
				this.caseInfo.accidentDate=e.value;
			},
			// #ifdef MP-WEIXIN
			getRegeo(){
				const that = this;
				this.amapPlugin.getRegeo({
					success: (data) => {
						if(data){
							console.log(data)
							this.locationData = data[0]
							const regeocodeData=data[0].regeocodeData
							if(regeocodeData){
								this.caseInfo.curLocation = regeocodeData.formatted_address
								this.latitude=data[0].latitude
								this.longitude=data[0].longitude
								this.canSave = true
							}
						}
					},
					fail:(info)=> {
						this.location = '定位失败'
					}
				});
				
			},
			isGetLocation(a="scope.userLocation"){ // 3. 检查当前是否已经授权访问scope属性，参考下截图
				var _this=this;
				uni.getSetting({
					success(res) {	
						const authFlag=res.authSetting[a]
						if (!authFlag) {  //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
							if(authFlag==null||authFlag==undefined){
								_this.getRegeo(this)
							}else{
								wx.showModal({
									title: '提示',
									content: '需要获取您的位置信息，用于获取当前位置',
									cancelText:'不授权',
									cancelColor:'#999',
									confirmText:'授权',
									confirmColor:'#0081ff',
									success(res) {
										if (res.confirm) {
											uni.openSetting({
												success(res) {
													_this.getRegeo(this);
												},
												fail(res) {
													_this.$Router.back(1)
												}
											})                                
										} else if (res.cancel) {
											_this.getRegeo(this)
										}
									}
								})
							}
						}else{
							_this.getRegeo(this)
						}
					}
				});
			}
			// #endif
		},
	}
</script>

<style>
page{
	background-color: #ffffff;
}
.head{
	width: 750rpx;
	font-size: 30rpx;
	line-height: 95rpx;
	font-weight: bold;
	display:flex;
	padding-left: 30rpx;
	font-family: 'STHeitiSC-Medium';
}
.shead{
	height: 89rpx;
	line-height: 89rpx;
	color: '#777777';
	padding-left: 30rpx;
}
</style>
